<template>
	<table v-show="list.length > 0" class="table table-bordered table-hover">
    <caption>迷你组合Banner列表</caption>
    <thead>
      <tr>
        <th class="col-xs-2">标题</th>
        <th class="col-xs-2">类型</th>
        <th>索引</th>
        <th class="text-right">排序</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="banner in list">
        <td>{{banner.title}}</td>
        <td class="col-nowrap">{{banner.type | adTypeCase}}</td>
        <td>{{banner.location}}</td>
        <td class="col-nowrap text-right">
           <button class="btn btn-sm btn-success" v-if=" $index > 0 " @click="moveUp(banner.id, list[$index - 1].id)">上移</button>
           <button class="btn btn-sm btn-success" v-if=" $index < list.length - 1" @click="moveDown(banner.id, list[$index + 1].id)">下移</button>
           <button class="btn btn-sm" v-if=" $index >= list.length - 1 " :style="{ opacity: 0, 'pointer-events': 'none' }">占位</button>
        </td>
        <td class="col-nowrap text-right">
          <vue-mini-banner-update :banner="banner"></vue-mini-banner-update>
          <button class="btn btn-danger btn-sm" @click="deleteBanner(ad.id)">删除</button>
        </td>
      </tr>
    </tbody>
  </table>
  <vue-pages :pages.sync="pages" :get-list="getBannerList"></vue-pages>
</template>
<style src="./mini-banner-list.css" scoped></style>
<script src="./mini-banner-list.js"></script>